<template>
  <div ref="globalModal" class="collect-operate-modal">
    <a-modal
      v-bind="$attrs"
      v-model:visible="visible"
      title="确认采集"
      :width="660"
      :getContainer="() => $refs.globalModal"
      :confirm-loading="confirmLoading"
      @ok="modelConfirm"
      @cancel="modelCancel"
    >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :labelCol="{ style: { width: '92px' } }"
        :colon="false"
        labelAlign="right"
      >
        <a-form-item label="内容分发" name="distribute_type">
          <a-radio-group v-model:value="formData.distribute_type">
            <a-radio :value="item.value" v-for="item in CONTENT_DISTRIBUTE_TYPE" :key="item.value" class="mr-[90px]">{{
              item.label
            }}</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="内容数量">
          <ContentQuantityTable />
        </a-form-item>

        <a-form-item label="采集范围" name="collect_scope" v-if="seedSourceVisible">
          <a-radio-group v-model:value="formData.collect_scope">
            <a-radio :value="item.value" v-for="item in COLLECT_RANGE" :key="item.value" class="mr-[62px]">{{
              item.label
            }}</a-radio>
          </a-radio-group>
        </a-form-item>

        <!-- 价格设定 -->
        <PriceSetting v-model:price_set="formData.price_set" v-model:price="formData.price" />
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup name="CollectOperateModal">
import ContentQuantityTable from './ContentQuantityTable.vue'
import PriceSetting from './price-setting/index.vue'
import { computed, inject, reactive, ref, toRefs, watch } from 'vue'
import { CONTENT_DISTRIBUTE_TYPE, COLLECT_RANGE } from '@/stores/modules/collect-manage/select-data-source'
import type { Rule } from 'ant-design-vue/es/form'
import type { PriceSettingType, GoldCoinType } from './price-setting/type'
import apis from '@/apis'
import { message } from 'ant-design-vue'
import { selectedRowKeys } from '../../../hooks/useTable'
import { getTableData } from '../../../hooks/useTable'

// inject
const id = inject('id') as string
console.log('采集id: ', id)
const resourceType = inject('resourceType')
console.log('resourceType--------------------: ', resourceType)

// props
type Props = { collectOperateType: number | null; selectFlag: boolean }
const props = defineProps<Props>()
const { collectOperateType, selectFlag } = toRefs(props)

// modelState
let visible = ref<boolean>(false)
let confirmLoading = ref<boolean>(false)

// form-data
const formRef = ref()

type FormDataType = {
  collect_id: string
  distribute_type: number
  collect_scope: number
  price_set: PriceSettingType
  coin_set: GoldCoinType
  price: GoldCoinType
  time_type: number | null
  film_id: string[]
}
let formData = reactive<FormDataType>({
  collect_id: id,
  distribute_type: 2,
  collect_scope: 1,
  price_set: 1,
  coin_set: '',
  price: '',
  time_type: collectOperateType.value,
  film_id: []
})

watch(
  () => selectedRowKeys.value,
  (val: any) => {
    console.log('selectedRowKeys----watch: ', val)
    formData.film_id = val
  }
)
// form-rule
const rules: Record<string, Rule[]> = {
  distribute_type: [{ required: true, trigger: 'change' }],
  collect_scope: [{ required: true, trigger: 'change' }],
  price_set: [{ required: true, trigger: 'change' }]
}

// 种源字段 visible
let seedSourceVisible = computed(() => resourceType == 1)

// model
const modelCancel = () => {
  formRef.value.resetFields()
  selectedRowKeys.value = []
  confirmLoading.value = false
  visible.value = false
}

const { collectConfirm, collectById } = apis.collectManage
const formatCoinSet = (moneyStr: string): number | number[] => {
  if (moneyStr.includes(',')) {
    return moneyStr.split(',').map((m: string) => Number(m))
  } else {
    return !moneyStr ? [0] : [Number(moneyStr)]
  }
}

// interface ParamsType extends Omit<FormDataType, 'coin_set'> {
//   coin_set: number | number[]
// }
const modelConfirm = () => {
  formRef.value.validate().then(() => {
    const params: any = { ...formData }
    params.time_type = collectOperateType.value
    params.coin_set = formatCoinSet(params.price)
    console.log('submit', params)
    confirmLoading.value = true
    const requestApi = selectFlag.value ? collectById : collectConfirm
    requestApi(params)
      .then((res) => {
        message.success('采集成功')
        formRef.value.resetFields()
        selectedRowKeys.value = []
        confirmLoading.value = false
        visible.value = false
        getTableData()
      })
      .catch(() => {
        confirmLoading.value = false
      })
  })
}

defineExpose({ visible })
</script>

<!-- <style lang="less">
.collect-operate-modal {
}
</style> -->
